import React, { useEffect, useState, useRef } from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { request } from 'umi';
import { Tag } from 'antd';
import SpecificRoleInfoComponent from './components/SpecificRoleInfoComponent';
import { PageContainer } from '@ant-design/pro-layout';
import InserRoleComponent from './components/InserRoleComponent';
import DeleteComponent from './components/DeleteComponent';
import ProCard from '@ant-design/pro-card';
import { api } from '@/global';
import { useAccess, Access } from 'umi';
type RoleType = {
  id: number;
  roleName: string;
  roleDesc: string;
  systemic: boolean;
};

type PermissionType = {
  id: number;
  permissionName: string;
  moduleName: string;
  actionName: string;
};

const DetailList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const access = useAccess();
  function reloadPage() {
    actionRef.current?.reload();
  }
  const columns: ProColumns<RoleType>[] = [
    {
      title: '序号',
      key: 'id',
      dataIndex: 'id',
      width: 50,
    },
    {
      title: '角色名称',
      key: 'roleName',
      dataIndex: 'roleName',
    },
    {
      title: '角色描述',
      key: 'roleDesc',

      dataIndex: 'roleDesc',
    },
    {
      title: '是否为内置角色',
      key: 'systemic',
      dataIndex: 'systemic',
      render: (_, row) => {
        return (
          <div key={row.id}>
            <Tag color={row.systemic ? '#3498db' : '#2ecc71'}>{row.systemic ? '是' : '否'}</Tag>
          </div>
        );
      },
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      render: (_, row) => [
        <Access key={'update' + row.id} accessible={access.normalButtonFilter('PERMISSION:UPDATE')}>
          <SpecificRoleInfoComponent
            key={'update' + row.id}
            currentId={row.id}
            curentName={row.roleName}
            curentDesc={row.roleDesc}
            curentDefault={row.systemic}
            reloadPage={reloadPage}
          />
        </Access>,
        <Access key={'deleye' + row.id} accessible={access.normalButtonFilter('PERMISSION:DELETE')}>
          <DeleteComponent
            key={'deleye' + row.id}
            currentId={row.id}
            curentName={row.roleName}
            reloadPage={reloadPage}
          />
        </Access>,
      ],
    },
  ];

  return (
    <div>
      <ProTable<RoleType>
        columns={columns}
        headerTitle="角色管理"
        actionRef={actionRef}
        request={async () => {
          return request<{
            data: RoleType[];
          }>(api.getAllRoleList, {
            method: 'GET',
          });
        }}
        pagination={false}
        rowKey="id"
        options={false}
        search={false}
        toolbar={{
          actions: [
            <Access key={'insert'} accessible={access.normalButtonFilter('PERMISSION:INSERT')}>
              <InserRoleComponent key={'insert'} reloadPage={reloadPage}></InserRoleComponent>
            </Access>,
          ],
        }}
      />
    </div>
  );
};

const IPList: React.FC = () => {
  const columns: ProColumns<PermissionType>[] = [
    {
      title: '序号',
      key: 'id',
      dataIndex: 'id',
    },
    {
      title: '权限',
      key: 'permissionName',
      dataIndex: 'permissionName',

      // render: (_, item) => {
      //   console.log(item);

      //   return <Badge status={item.status} text={item.permissionName} />;
      // },
    },
    {
      title: '所属模块',
      key: 'moduleName',
      dataIndex: 'moduleName',
    },
    {
      title: '所属行为',
      key: 'actionName',
      dataIndex: 'actionName',
    },
  ];
  return (
    <ProTable<PermissionType>
      size="small"
      headerTitle="权限列表"
      columns={columns}
      request={async (params, sorter, filter) => {
        // 表单搜索项会从 params 传入，传递给后端接口。

        return request<{
          data: PermissionType[];
        }>(api.getAllPermission, {
          method: 'GET',
        });
      }}
      pagination={{
        pageSize: 25,
        showSizeChanger: false,
      }}
      rowKey="id"
      options={false}
      search={false}
    />
  );
};

const Demo: React.FC = () => {
  return (
    <PageContainer
      waterMarkProps={{
        content: '山西工程技术学院',
      }}
      header={{
        title: '用户与权限管理',
        breadcrumb: {
          routes: [
            {
              path: '',
              breadcrumbName: '组织管理',
            },
            {
              path: '',
              breadcrumbName: '用户与权限管理',
            },
          ],
        },
      }}
    >
      <ProCard split="vertical">
        <ProCard colSpan="500px" ghost>
          <IPList />
        </ProCard>
        <ProCard>
          <DetailList />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};

export default Demo;
